<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>swiper</title>
  <link rel="stylesheet" href="css/swiper.min.css">
  <script src="js/swiper.min.js"></script>
  <style>
    .swiper-container {
      width: 600px;
      height: 300px;
    }
    .a{
     
      display: flex;
    }
    .a div {
      width: 600px;
      height: 300px;
      border:1px solid red;
      overflow: hidden;
    }

    img {
      max-width: 100%;
      height: auto;
      aspect-ratio: 2 / 1;
      object-fit: cover;
    }
  </style>
</head>
<div class="a">
  <div>
    <img src="imges/slide1.jpg" alt="">
  </div>
  <div>
    <img src="imges/slide2.jpg" alt="">
  </div>
  <div>
    <img src="imges/slide3.jpg" alt="">
  </div>
  <div>
    <img src="imges/slide4.jpg" alt="">
  </div>
  <div>
    <img src="imges/slide5.png" alt="">
  </div>
  <div>
    <img src="imges/slide6.jpg" alt="">
  </div>

  <body>
</div>




</div>
<script>
  var mySwiper = new Swiper('.swiper-container', {
    initialSlide: 2,
    loop: false, // 循环模式选项
    // autoplay: {
    //   delay: 3000,
    //   stopOnLastSlide: false,
    //   disableOnInteraction: true,
    // },
    centeredSlides: true,
    slidesPerView: 3,

    // 如果需要前进后退按钮
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },


  })        
</script>
</body>

</html>